<template>
  <div class="data-out-frame">
    <Card class="data-card">
      <template slot="title">
        <p>{{ describe }}</p>
      </template>
      <template slot="extra">
        <Button type="primary" @click="createBtn" icon="md-add">
          创建任务
        </Button>
      </template>
      <!--任务分类-->
<!--      <task-class title="task" @on-change="onChange"></task-class>-->
      <task-center :type="selectedType"></task-center>
    </Card>
  </div>
</template>

<script>
  import TaskClass from "../component/taskClass/TaskClass";
  import TaskCenter from "../component/taskClass/TaskCenter";
  import {mapState, mapActions} from 'vuex';
  import TaskEngine from "../component/taskClass/TaskEngine";
  export default {
    name: "TaskDataInfo",
    components: {TaskEngine, TaskCenter, TaskClass},
    data() {
      return {
        selectedType: "ship-towing-task",
        describe: "舰艇拖带"
      }
    },
    methods: {
      onChange(key) {
        this.selectedType = key;
      },
      createBtn() {
        let _this = this;
        this.$router.push({
          path: '/operate',
          query: {
            taskType: _this.selectedType
          }
        })
      }
    },
    mounted() {
      if (this.$route.query !== undefined && this.$route.query.type !== undefined) {
        this.selectedType = this.$route.query.type;
      }
      if (this.$route.query !== undefined && this.$route.query.describe !== undefined) {
        this.describe = this.$route.query.describe;
      }
    }
  }
</script>

<style lang="less" scoped>

  /deep/ .data-card .ivu-card-head p {
    font-size: 18px;
  }
  .data-out-frame{
    margin-top: 130px;
    margin-bottom: 30px;
    width: 100%;
    .data-card {
      width: 1200px;
      margin: 0 auto;
    }
  }
</style>
